import { useEffect, useState, useRef } from "react";
import axios from 'axios';
// useEffect 由渲染自身引起的副作用

// export default function Welcome({ name }) {
//   // 这里希望组件加载完成之后，网页标题会随之改变。那么改变网页标题这个操作，就是组件的副效应，必须通过useEffect()实现
//   // useEffect()就是指定一个副效应函数，组件每渲染一次，该函数就执行一次，组件首次在网页DOM加载后，副效应函数也会执行
//   // useEffect(() => {
//   //   document.title = '加载完成';
//   // });

//   /**
//    * useEffect()的第二个参数
//    * 有时候，我们不希望useEffect()每次渲染都会执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。
//    */

//   useEffect(() => {
//     document.title = `Hello, ${name}`;
//   }, [name])

//   return <h1>Hello, {name}</h1>
// }

// export default function Welcome() {
//   const [data, setData] = useState({ hits: [] });

//   useEffect(() => {
//     console.log('useEffect执行了');

//     const fetchData = async () => {
//       const result = await axios(
//         'https://hn.algolia.com/api/v1/search?query=redux',
//       );

//       setData(result.data);
//     };

//     fetchData();
//   }, []);

//   return (
//     <ul>
//       {data.hits.map(item => (
//         <li key={item.objectID}>
//           <a href={item.url} target="_black">{item.title}</a>
//         </li>
//       ))}
//     </ul>
//   );
// }

// function VideoPlayer({ src, isPlaying }) {
//   const videoRef = useRef(null);
//   useEffect(() => {
//     if (isPlaying) { // isPlaying 在此处使用...
//       console.log('play()');
//       videoRef.current.play();
//     } else {
//       console.log('pause()');
//       videoRef.current.pause();
//     }
//   }, [isPlaying]); // 所以它必须在此处声明！
//   /**
//    * 将[isPlaying]作为依赖数组会告诉React: 如果isPlaying与上次渲染时相* * 同，就跳过重新运行Effect，即当isPlaying发生变化时Effect才会重新运行
//    *
//    * 当依赖项是多个的话，只有指定的所有依赖项都与上一次渲染时完全相同，
//    * React才会跳过该Effect
//    *
//    * useEffect(() => {
//       // 这里的代码会在每次渲染后运行
//     });
//    * useEffect(() => {
//        // 这里的代码只会在组件挂载（首次出现）时运行
//     },[]);
//     useEffect(() => {
//       // 这里的代码不但会在组件挂载时运行，而且当 a 或 b 的值自上次渲染后发生变化后也会运行
//     }, [a, b]);
//    */

//   // 渲染应该是纯粹的JSX计算，不应该包含任何像修改DOM这样的副作用
//   return (
//     <>
//       <video ref={videoRef} src={src} muted></video>
//     </>
//   )
// }

// export default function VideoPlayerParent() {
//   const [text, setText] = useState('');
//   const [isPlaying, setIsPlaying] = useState(true);
//   const src = `https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4`;

//   const isVIP = useRef(true);

//   function handleClick() {
//     setIsPlaying(!isPlaying);
//   }

//   return (
//     <>
//       <input type="text" value={text} onChange={(e) => {
//         isVIP.current = true;
//         setText(e.target.value)
//       }} />
//       <button onClick={handleClick}>{isPlaying ? '暂停' : '播放'}</button>
//       <VideoPlayer src={src} isPlaying={isPlaying} />
//     </>
//   )
// }

function createConnection() {
  return {
    connect() {
      console.log('✅ 连接中……');
    },
    disconnection() {
      console.log('❌ 连接断开。');
    }
  }
}

export default function ChatRoom() {
  const dialogRef = useRef(null);
  // 在生产环境下，你只会看到 "✅ 连接中……" 打印一次。
  useEffect(() => {
    const connection = createConnection();
    connection.connect(); // connect中的打印打印了两次？？ 这是因为在开发环境中，React会在组件首次挂载后立即重新挂载一次
    // 解决办法: 在Effect中返回一个清理函数，这个清理函数会在每次Effect重新运行之前调用清理函数，并在组件卸载时最后一次调用清理函数

    const dialog = dialogRef.current;
    dialog.showModal();
    return () => dialog.close();
    // return () => {
    //   connection.disconnection();
    // }
  }, []); // 依赖项为空数组，说明Effect之后在挂载时运行一次.


  return (
    <dialog ref={dialogRef}>
      <h1>欢迎来到聊天室！</h1>
      <p>你可以在这里放置任何内容。</p>
      <button onClick={() => dialogRef.current.close()}>关闭</button>
    </dialog>
  )
}